<template>
    <div class="w-full flex hover:bg-gray-200 h-8 leading-8">
        <p class="w-[3%]"><span v-if="index < 9">0</span>{{ index + 1 }}</p>
        <p class="w-[30%] textoverflow" :title="showList.name" @click="router.push(`/musicDetail/${showList.id}`)">{{
            showList.name }}</p>
        <p class="w-[31%] textoverflow" :title="showList.album.name" @click="router.push(`/album/${showList.album.id}`)">
            {{ showList.album.name }}</p>
        <p class="w-[30%]" @click="router.push(`/singerDetail/${showList.singer[0].id}`)"> {{ showList.singer[0].name }}
        </p>
        <p class="w-[4%]">{{ setTime(showList.time) }}</p>
    </div>
</template>
<script setup lang="ts">
import { setTime } from '~~/hook/format';
const router = useRouter()
interface prop {
    name: string,
    album: {
        name: string,
        id: any,
        picUrl?: string
    },
    singer: {
        name: string,
        id: any
    }[],
    time: any,
    index: number,
    id: any
}
const showList = defineProps<prop>()
</script>
<style lang="">
    
</style>